<template>
  <div>
    <el-card class="box-card" v-if="type === 1">
      <paper-list
        @changeType="changeType"
        @edit="edit"
        @show="show"
      ></paper-list>
    </el-card>
    <el-card class="box-card" v-else-if="type === 4">
      <div slot="header" class="clearfix">
        <span>试卷名称: {{ paperData.paper_name }}</span>
        <el-button
          style="float: right"
          size="small"
          type="primary"
          plain
          @click="type = 1"
          >返回列表</el-button
        >
      </div>
      <el-row>
        <el-col :span="6">归属学科：{{ paperData.subject_name }}</el-col>
        <el-col :span="6">归属目录：{{ paperData.directory_name }}</el-col>
        <el-col :span="6"
          >试卷状态：<el-tag v-if="paperData.show_state === 1" type="success"
            >启用</el-tag
          ><el-tag v-else type="info">禁用</el-tag>
        </el-col>
        <el-col :span="6"
          >试卷类型：{{
            paperData.paper_type === 1 ? "模拟卷" : "真题卷"
          }}</el-col
        >
      </el-row>
      <el-row>
        <el-col :span="6"
          >试卷难度：<span v-if="paperData.difficulty === 1">简单</span
          ><span v-else-if="paperData.difficulty === 2">中等</span
          ><span v-else>较难</span></el-col
        >
        <el-col :span="6">试卷题型：{{ qt }}</el-col>
        <el-col :span="6">试卷总分：{{ paperData.total_score }}</el-col>
        <el-col :span="6">及格分数：{{ paperData.pass_score }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">创建人：{{ paperData.create_name }}</el-col>
        <el-col :span="6"
          >创建时间：{{ paperData.created_at | formatTime }}</el-col
        >
      </el-row>
      <el-divider></el-divider>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        empty-text="请勾选试卷包含题型，从而生成选题模板"
      >
        <el-table-column prop="name" align="center" label="题型" width="150">
        </el-table-column>
        <el-table-column prop="address" label="选题信息">
          <template slot-scope="scope">
            <el-row>
              共 &nbsp;
              <el-input
                style="width: 70px"
                size="small"
                v-model="scope.row.num"
                placeholder="0"
              ></el-input>
              题,每题
              <el-input
                style="width: 70px"
                size="small"
                v-model="scope.row.score"
                placeholder="0"
              ></el-input
              >分,已选题数: &nbsp; &nbsp;<el-link
                type="primary"
                :underline="false"
                >{{ num(scope.row.type) }}</el-link
              >
              题
              <el-button
                size="small"
                type="success"
                @click="look(scope.row.type)"
                >看题</el-button
              >
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card class="box-card" v-else>
      <div slot="header" class="clearfix">
        <span>{{ type === 2 ? "新增试卷" : "修改试卷" }}</span>
        <el-button
          style="float: right"
          size="small"
          type="primary"
          plain
          @click="type = 1"
          >返回列表</el-button
        >
      </div>
      <el-form
        :model="formData"
        :rules="rules"
        ref="formData"
        label-position="right"
        label-width="110px"
        size="normal"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="试卷名称"
              style="marginright: 30px"
              prop="paper_name"
            >
              <el-input
                v-model="formData.paper_name"
                placeholder="请输入试卷名称"
                size="large"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="试卷包含题型" prop="quest_type">
              <el-checkbox-group v-model="formData.quest_type" @change="change">
                <el-checkbox :label="1" name="quest_type">单选题</el-checkbox>
                <el-checkbox :label="2" name="quest_type">多选题</el-checkbox>
                <el-checkbox :label="3" name="quest_type">判断题</el-checkbox>
                <el-checkbox :label="4" name="quest_type">简答题</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="归属学科" prop="subject_id">
              <el-select
                v-model="formData.subject_id"
                placeholder="请选择学科"
                clearable
                
              >
                <el-option
                  v-for="item in treeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="归属目录" prop="directory_id">
              <el-select
                v-model="formData.directory_id"
                placeholder="归属目录"
                clearable
                
              >
                <el-option
                  v-for="item in directoryList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试卷状态" prop="show_state">
              <el-radio-group v-model="formData.show_state">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="2">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试卷类型" prop="paper_type">
              <el-radio-group v-model="formData.paper_type">
                <el-radio :label="1">模拟卷</el-radio>
                <el-radio :label="2">考试卷</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="试卷总分" prop="total_score">
              <el-input
                style="width: 60%"
                placeholder="请输入总分"
                v-model="formData.total_score"
              >
                <template slot="append">分</template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="及格分数" prop="pass_score">
              <el-input
                style="width: 65%"
                placeholder="60"
                v-model="formData.pass_score"
              >
                <template slot="append">分</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="试卷难度" prop="difficulty">
              <el-select
                v-model="formData.difficulty"
                placeholder="请选择难度"
                clearable
                
                style="width: 60%"
              >
                <el-option label="简单" :value="1"></el-option>
                <el-option label="中等" :value="2"></el-option>
                <el-option label="较难" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="选题信息" size="normal">
              <el-table
                :data="tableData"
                border
                style="width: 100%"
                empty-text="请勾选试卷包含题型，从而生成选题模板"
              >
                <el-table-column
                  prop="name"
                  align="center"
                  label="题型"
                  width="150"
                >
                </el-table-column>
                <el-table-column prop="address" label="选题信息">
                  <template slot-scope="scope">
                    <el-row>
                      共 &nbsp;
                      <el-input
                        style="width: 70px"
                        size="small"
                        v-model="scope.row.num"
                        placeholder="0"
                      ></el-input>
                      题,每题
                      <el-input
                        style="width: 70px"
                        size="small"
                        v-model="scope.row.score"
                        placeholder="0"
                      ></el-input
                      >分,已选题数: &nbsp; &nbsp;<el-link
                        type="primary"
                        :underline="false"
                        >{{ num(scope.row.type) }}</el-link
                      >
                      题
                      <el-button
                        size="small"
                        type="success"
                        @click="look(scope.row.type)"
                        >看题</el-button
                      >
                      <el-button
                        size="small"
                        type="primary"
                        @click="select(scope.row.type)"
                        >选题</el-button
                      >
                    </el-row>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="    ">
              <el-button type="primary" size="medium" @click="submitForm">{{
                type === 2 ? "立即创建" : "立即修改"
              }}</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-col></el-row
        >
      </el-form>
    </el-card>
    <el-dialog :visible.sync="dialogVisible" width="70%" v-if="dialogVisible">
      <div slot="title" class="clearfix">
        <span>卡片名称</span>
      </div>
      <question-list-paper
        :selectList="multipleSelection"
        :quest_type="q_type"
        ref="questPaper"
      ></question-list-paper>
      <span slot="footer" center class="dialog-footer">
        <el-button type="primary" @click="xuanze">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogVisible2"
      width="70%"
      :before-close="handleClose"
      v-if="dialogVisible2"
    >
      <div slot="title" class="clearfix">
        <span>试题</span>
      </div>
      <question-list-look
        ref="questLook"
        :selectList="multipleSelection"
        :quest_type="q_type"
        @confirm="confirm"
      ></question-list-look>
    </el-dialog>
  </div>
</template>

<script>
import PaperList from "./component/PaperList.vue";
import QuestionListPaper from "@/components/QuestionListPaper";
import QuestionListLook from "@/components/QuestionListLook";
import {
  getTreeList,
  addPaperList,
  getExamPaper,
  PutPaperList,
} from "@/api/exam/question";
export default {
  name: "Paper",
  components: {
    PaperList,
    QuestionListPaper,
    QuestionListLook,
  },
  data() {
    return {
      type: 1,
      qt: "",
      dialogVisible: false,
      dialogVisible2: false,
      q_type: "",
      multipleSelection: [],
      treeList: [],
      formData: {
        difficulty: "",
        directory_id: "",
        paper_name: "",
        paper_type: 2,
        pass_score: 60,
        quest_type: [],
        question_list: [114],
        show_state: 1,
        subject_id: 1,
        total_score: 100,
      },
      paperData: {},
      tableData: [
        {
          type: 1,
          name: "单选题",
          num: 0,
          score: 0,
          check_list: [],
        },
        {
          type: 2,
          name: "多选题",
          num: 0,
          score: 0,
          check_list: [],
        },
        {
          type: 3,
          name: "判断题",
          num: 0,
          score: 0,
          check_list: [],
        },
        {
          type: 4,
          name: "简答题",
          num: 0,
          score: 0,
          check_list: [],
        },
      ],
      rules: {
        subject_id: [
          { required: true, message: "请选择学科名称", trigger: "blur" },
        ],
        directory_id: [
          { required: true, message: "请选择目录名称", trigger: "blur" },
        ],
        paper_name: [
          { required: true, message: "请输入试卷名称", trigger: "blur" },
        ],
        difficulty: [{ required: true, message: "请选择难易度", trigger: "blur" }],
        quest_type: [{ required: true, message: "请选择类型", trigger: "blur" }],
        total_score: [{ required: true, message: "请输入总分", trigger: "blur" }],
        pass_score: [{ required: true, message: "请输入及格分 ", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getTreeList();
    this.tableData = this.tableData.filter((item) => {
      return this.formData.quest_type.includes(item.type);
    });
  },
  methods: {
    async getTreeList() {
      try {
        const res = await getTreeList();
        console.log(res);
        this.treeList = res.data;
      } catch (error) {
        console.log(error);
      }
    },
    change() {
      console.log(123);
      console.log(this.formData.quest_type);
      this.tableData = [
        {
          type: 1,
          name: "单选题",
          num: 0,
          score: 0,
          check_list: [],
        },
        {
          type: 2,
          name: "多选题",
          num: 0,
          score: 0,
          check_list: [],
        },
        {
          type: 3,
          name: "判断题",
          num: 0,
          score: 0,
          check_list: [],
        },
        {
          type: 4,
          name: "简答题",
          num: 0,
          score: 0,
          check_list: [],
        },
      ];
      this.tableData = this.tableData.filter((item) => {
        return this.formData.quest_type.includes(item.type);
      });
      console.log(this.tableData);
    },
    select(type) {
      this.dialogVisible = true;

      this.q_type = type;
    },
    xuanze() {
      console.log(this.$refs);

      console.log(this.$refs.questPaper.multipleSelection);
      this.multipleSelection.push(...this.$refs.questPaper.multipleSelection);
      this.dialogVisible = false;
    },
    confirm() {
      this.multipleSelection.pop(...this.$refs.questLook.delList);
    },
    look(type) {
      this.dialogVisible2 = true;

      this.q_type = type;
    },
    async submitForm() {
      if (this.type === 2) {
        try {
          this.multipleSelection.forEach((item) => {
            this.formData.question_list.push(item.id);
          });
          this.formData.check_question_list = this.tableData;
          const res = await addPaperList(this.formData);
          this.$message.success("创建试卷成功");
          this.type = 1;
        } catch (error) {
          console.log(error);
        }
      }
      if (this.type === 3) {
        try {
          console.log(this.id);
          console.log();
          // this.multipleSelection.forEach((item) => {
          //   this.formData.question_list.push(item.id);
          // });
          this.formData = {
            ...this.data,
            ...this.formData,
          };
          // this.formData.question_data = this.multipleSelection
          this.formData.question_list = [];
          this.multipleSelection.forEach((item) => {
            this.formData.question_list.push(item.id);
          });
          this.formData.check_question_list = this.tableData;
          console.log(this.multipleSelection);
          this.formData.question_data = this.multipleSelection;
          console.log(this.formData);
          const res = await PutPaperList(this.formData, this.id);
          this.$message.success("修改试卷成功");
          this.type = 1;
        } catch (error) {
          console.log(error);
        }
      }
    },
    async edit(row) {
      this.type = 3;
      this.id = row.id;
      console.log(this.id);
      if (this.type === 3) {
        let { data } = await getExamPaper(row.id);
        // JSON.parse(data.question_data).forEach(item=>{
        //   this.formData.question_list.push(item.id)
        // })
        this.data = data;
        for (var key in this.formData) {
          this.formData[key] = data[key];
        }
        console.log(data.check_question_list);
        this.multipleSelection = data.question_data;
        this.formData.quest_type = JSON.parse(data.quest_type);
        this.tableData = JSON.parse(data.check_question_list);
      }
    },
    async show(row) {
      this.type = 4;
      this.id = row.id;
      if (this.type === 4) {
        let { data } = await getExamPaper(row.id);
        this.paperData = data;
        this.multipleSelection = data.question_data;
        this.tableData = JSON.parse(data.check_question_list);
        console.log(data);
        this.paperData.quest_type = JSON.parse(data.quest_type);
        console.log(this.paperData.quest_type);
        this.questType();
      }
    },
    changeType() {
      this.type = 2;
      this.formData = {
        difficulty: "",
        directory_id: "",
        paper_name: "",
        paper_type: 2,
        pass_score: 60,
        quest_type: [],
        question_list: [],
        show_state: 1,
        subject_id: 1,
        total_score: 100,
      };
      this.multipleSelection = [];
      this.tableData = [];
    },
    questType() {
      let typeList = [];

      if (this.paperData.quest_type.includes(1)) {
        typeList.push("单选题");
      }
      if (this.paperData.quest_type.includes(2)) {
        typeList.push("多选题");
      }
      if (this.paperData.quest_type.includes(3)) {
        typeList.push("判断题");
      }
      if (this.paperData.quest_type.includes(4)) {
        typeList.push("简单题");
      }
      this.qt = typeList.join(",");
    },
  },
  computed: {
    num() {
      return function (type) {
        if (type === 1) {
          let lll = this.multipleSelection.filter(
            (item) => item.quest_type === 1
          );
          return lll.length;
        }
        if (type === 2) {
          let lll = this.multipleSelection.filter(
            (item) => item.quest_type === 2
          );
          return lll.length;
        }
        if (type === 3) {
          let lll = this.multipleSelection.filter(
            (item) => item.quest_type === 3
          );
          return lll.length;
        }
        if (type === 4) {
          let lll = this.multipleSelection.filter(
            (item) => item.quest_type === 4
          );
          return lll.length;
        }
      };
    },
    directoryList() {
      // 目录信息
      if (!this.formData.subject_id) {
        return [];
      } else {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.formData.directory_id = "";
        const result = this.treeList.find((val) => {
          return val.id == this.formData.subject_id;
        });
        return result.children;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
body {
  background-color: #eaedf1;
}
.box-card {
  margin: 20px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-card__header {
  padding: 10px 20px;
  font-weight: bold;
  line-height: 32px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.el-dialog__header {
  padding: 15px 20px 10px !important;
  border-bottom: 1px solid #e9ecef;
}
.el-dialog__footer {
  text-align: center;
}
.el-table td div {
  letter-spacing: 3px;
}
</style>
